      
function sign(socket, id, token) {
  storage.id = id;
  storage.token = token;
  var root = document.createElement('sign');
  var child = document.createElement('child');
  root.appendChild(child);
  child.setAttribute('id', id);
  child.setAttribute('token', token);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
function websocket_init() {
  socket = new WebSocket("ws://" + IP_PORT + "/websocket");
  socket.onopen = function () {
    console.log("WebSocket connected");
    if (storage.id) {
      console.log("id: " + storage.id);
      sign (socket, storage.id, storage.token);
    } else {
      sign (socket, "245", "17931");
    }
  };
  socket.onmessage = function (event) {
    var message = event.data;
    console.log("++++:" + message);
    handle_text (message);
  };
  socket.onclose = function () {
    console.log("WebSocket disconnected");
    document.getElementById("show-contacts-notice").innerHTML = "无法连接到服务器";
  };
}
function get_contact(socket)
{
  var root = document.createElement('get_contact');
  var child = document.createElement('child');
  root.appendChild(child);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
function get_chats(socket)
{
  var root = document.createElement('get_chats');
  var child = document.createElement('child');
  root.appendChild(child);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
function get_history(socket, peer_id)
{
  var root = document.createElement('get_history');
  var child = document.createElement('child');
  root.appendChild(child);
  child.setAttribute('peer_id', peer_id);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
function add_contact (peer_id)
{
  var root = document.createElement('add_contact');
  var child = document.createElement('child');
  root.appendChild(child);
  child.setAttribute('peer_id', peer_id);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
function handle_add_contact (row_id, peer_id,agree)
{
  var root = document.createElement('handle_add_contact');
  var child = document.createElement('child');
  root.appendChild(child);
  child.setAttribute('row_id', row_id);
  child.setAttribute('peer_id', peer_id);
  child.setAttribute('status', agree);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
function agree_add_contact (peer_id, agree)
{
  var root = document.createElement('agree_add_contact');
  var child = document.createElement('child');
  root.appendChild(child);
  child.setAttribute('peer_id', peer_id);
  child.setAttribute('status', agree);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
function show_or_hidden (show, hidden) {
  storage.show = show;
  storage.hidden = hidden;
  console.log("show:" + show + "  hidden:" + hidden);
  var s, h;
  s = document.getElementById(show);
  h = document.getElementById(hidden);
  if (s) {
    s.style.display = "grid";
    document.getElementById(show + "-notice").innerHTML = storage.status;
  }
  if (h) {
    h.style.display = "none";
  }
}
function jump_page (url)
{
   window.location.href = url;
}
function jump_to(prev, next)
{
  var old = document.getElementById(prev);
  var new1 = document.getElementById(next);
  if (old && new1) {
    storage.main_box = next;
    storage.main_box_prev = prev;
    old.style.display = "none";
    new1.style.display = "grid";
  } else {
    console.log("old or new is null, old:" + old + " new:" + new1);
  }
}
function L2_jump (name) {
  storage.main_L2box = name;
  only_show_div('center-box', name);
}
function jump_to_message (id) {
  var s, h;
  s = document.getElementById("show-message");
  h = document.getElementById('show-contacts');
  if (s) {
    s.style.display = "grid";
    storage.L1box = "show-message";
    document.getElementById('history-box').style.display = "grid";
    document.getElementById("show-message-notice").innerHTML = id;
    get_history(socket, storage.peer_id);
  }
  if (h) {
    h.style.display = "none";
  }
  storage.status = "signed";
  var chat = document.getElementById('no_read-' + id);
  chat.remove();
}
function back() {
  var s, h;
  s = document.getElementById("show-contacts");
  h = document.getElementById('show-message');
  if (s) {
    s.style.display = "grid";
    storage.L1box = "show-contacts";
    document.getElementById("show-contacts-notice").innerHTML = storage.status;
  }
  if (h) {
    h.style.display = "none";
    document.getElementById('history-box').style.display = "none";
  }
  storage.status = "signed";
}
function add_or_sign ()
{
  if (storage.status == "signed") {
    jump_page ("account_find.html");
  } else {
    jump_page ("sign_in.html");
  }
}
function only_show_div(classname, divId) {
  storage.pre_contacts_box = storage.contacts_box;
  storage.contacts_box = divId;
  var divs = document.getElementsByClassName(classname);
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
  }
  var divToShow = document.getElementById(divId);
  if (divToShow) {
    divToShow.style.display = "grid";
  }
}
function i_sign (err, notice, as, show_contacts) {
  var element;
  if (err) {
    notice.innerHTML = err;
    as.innerHTML = "sign in";
    only_show_div ("chats-box");
  } else {
    document.querySelector("title").textContent = "[chat]" + storage.id;
    notice.innerHTML = "sign sucess";
    get_contact(socket);
    get_chats(socket);
    if (storage.main_box == "show-message") {
      more.innerHTML = storage.peer_id;
      get_history(socket, storage.peer_id);
    }
  }
}
function i_get_contact (children, box) {
  var element, id;
  for (const node of children) {
    id = node.getAttribute("id");
    element = document.createElement("div");
    element.id = id; 
    element.innerText = "[" + id + "]" + 
      node.getAttribute("username");
    element.style.gridColumn = 'span 16';
    element.onclick = function() {
      storage.peer_id = id;
      jump_to_message (id);
    };
    box.appendChild(element);
  }
  box.scrollTop = box.scrollHeight;
}
function i_get_chats (children, box) {
  var element, id, row_id;
  for (const node of children) {
    id = node.getAttribute("id");
    row_id = node.getAttribute("row_id");
    element = document.createElement("div");
    element.id = 'chats-' + id; 
    element.innerText = "[" + id + "]" + 
      node.getAttribute("username");
    element.style.gridColumn = 'span 16';
    {
      var button = document.createElement("button");
      button.textContent = "agree";
      button.style.gridColumn = "13/15";
      button.onclick = function() {
        agree_add_contact (node.getAttribute("id"), 1);
        box.remove(element);
      };
      element.appendChild(button);
      button = document.createElement("button");
      button.textContent = "disagree";
      button.style.gridColumn = "15/17";
      button.onclick = function() {
        agree_add_contact (node.getAttribute("id"), 0);
        box.remove(element);
      };
      element.appendChild(button);
    }
    box.appendChild(element);
  }
  box.scrollTop = box.scrollHeight;
}
function create_no_read_element (box, id, count)
{
  var element;
    element = document.createElement("div");
    element.id = 'no_read-' + id; 
    element.style.display = 'grid';
    element.style.gridColumn = 'span 16';
    {
      var cell = document.createElement("div");
      cell.innerHTML = id + "--";
      cell.style.gridColumn = "1/14";
      element.appendChild(cell);
    }
    {
      var cell = document.createElement("div");
      cell.id = 'no_read-cell_' + id; 
      cell.style.gridColumn = "14/span 2";
      cell.innerHTML = count;
      element.appendChild(cell);
    }
    element.onclick = function() {
      storage.peer_id = id;
      jump_to_message (id);
    };
    box.appendChild(element);
}
function i_get_no_read (children, box) {
  var element, id, row_id;
  for (const node of children) {
    id = node.getAttribute("send_id");
    create_no_read_element(box, id, node.getAttribute("count"));
  }
  box.scrollTop = box.scrollHeight;
}
function i_get_history (children, box) {
  var element;
  var id, msg;
  for (const node of children) {
    element = document.createElement("div");
    element.style.gridColumn = 'span 16';
    id = node.getAttribute("send_id"); 
    msg = node.getAttribute("msg"); 
    if (id == storage.id) {
      element.style.textAlign = "right";
      element.style.backgroundColor = "green";
      element.innerText = msg + ":[me]";
    } else {
      element.style.textAlign = "left";
      element.innerText = id + ":" + msg;
    }
    box.appendChild(element);
  }
  box.scrollTop = box.scrollHeight;
}
function i_send (children, box) {
  var element;
  for (const node of children) {
    element = document.createElement("div");
    element.style.textAlign = "right";
    element.style.backgroundColor = "green";
    element.style.gridColumn = "span 16";
    element.innerText = node.getAttribute("msg") + ":[me]";
    box.appendChild(element);
  }
  box.scrollTop = box.scrollHeight;
}
function i_read (children, box, notice) {
  var element, peer_id;
  for (const node of children) {
    peer_id = node.getAttribute("peer_id");
    if (box.style.display == "grid") {
      if (peer_id == storage.peer_id) {
        element = document.createElement("div");
        element.style.textAlign = "left";
        element.innerText = storage.peer_id + ":" + node.getAttribute("msg");
        box.appendChild(element);
      } else {
        notice.innerHTML = node.getAttribute("peer_id") + "send a message";
      }
    } else {
      var chats;
      chats = document.getElementById('no_read-' + peer_id);
      if (chats) {
        cells = document.getElementById("no_read-cell_" + peer_id);
        cells.innerHTML = cells.innerHTML - 0 + 1;
      } else {
        var box = document.getElementById("chats-box");
        if (typeof box === 'object' && box !== null && 'appendChild' in box) {
          create_no_read_element(box, peer_id, 1);
        } else {
          console.log("no chats-box");
        }
      }
    }
  }
  box.scrollTop = box.scrollHeight;
}
function i_search (children, box) {
  var element;
  for (const node of children) {
    var show = document.createElement("div");
    show.innerText = "[" + node.getAttribute("id") + "]" + 
      node.getAttribute("username");
    show.style.gridColumn = "1/14";
    show.style.textAlign = "left";
    var button = document.createElement("button");
    button.textContent = "add";
    button.style.gridColumn = "15/17";
    button.onclick = function() {
      add_contact (node.getAttribute("id"));
    };
    box.appendChild(show);
    box.appendChild(button);
  }
  box.scrollTop = box.scrollHeight;
}
function i_add_contact (children, box) {
  var element, group_id, username, peer_id;
  for (const node of children) {
    group_id = node.getAttribute("group_id");
    peer_id = node.getAttribute("peer_id");
    username = node.getAttribute("username");
    element = document.createElement("div");
    var show = document.createElement("div");
    element.appendChild(show);
    if (group_id) {
      show.innerText = "[" + peer_id + "]" + username +
        "request to into " + group_id;
    } else {
      show.innerText = "[" + peer_id + "]" + username + "request to add you";
    }
    show.style.float = "left";
    var button = document.createElement("button");
    element.appendChild(button);
    //button.id = node.getAttribute("id"); 
    button.textContent = "agree";
    button.style = "grid-column:13/15;";
    button.onclick = function() {
      console.log("按钮被点击了！");
      handle_add_contact (node.getAttribute("row_id"),
        node.getAttribute("peer_id"), "1");
    };
    button = document.createElement("button");
    element.appendChild(button);
    //button.id = node.getAttribute("id"); 
    button.textContent = "disagree";
    button.style = "grid-column:15/17;";
    button.onclick = function() {
      handle_add_contact (node.getAttribute("row_id"),
        node.getAttribute("peer_id"), "0");
    };
    box.appendChild(element);
  }
  box.scrollTop = box.scrollHeight;
}
function i_handle_add_contact (children, box) {
  var element;
  for (const node of children) {
    element = document.createElement("div");
    element.id = node.getAttribute("id"); 
    element.innerText = "[" + node.getAttribute("id") + "]" + 
      node.getAttribute("username");
    box.appendChild(element);
  }
  box.scrollTop = box.scrollHeight;
}
function handle_text (message) {
  //console.log("status:" + storage.status);
  var show_message, notice, as, more, chats_box, contacts_box;
  var parser, root, child, err, id, msg;
  let children;
  show_message = document.getElementById("show-message");
  show_contacts = document.getElementById("show-contacts");
  chats_box = document.getElementById("chats-box");
  contacts_box = document.getElementById("contacts-box");
  history_box = document.getElementById("history-box");
  search_box = document.getElementById("search-box");
  if (storage.main_box == "show-message") {
    console.log("message:");
    notice = document.getElementById("show-message-notice");
    more = document.getElementById("more");
    var box = document.getElementById("history-box");
    if (box) {
      box.style.display = "grid";
    }
  } else {
    notice = document.getElementById("show-contacts-notice");
  }
  as = document.getElementById("add/sign");
  //parser xml
  parser = new DOMParser();
  xmlDoc = parser.parseFromString(message, "text/xml");
  root = xmlDoc.documentElement;
  child = root.childNodes[0];
  children = root.childNodes;
  if (child)
    err = child.getAttribute("error");
  if (root.nodeName == "") {
    show_message = "----:" + child.getAttribute("msg");
  } else if (root.nodeName == "sign") {
    i_sign (err, notice, as, show_contacts);
  } else if (root.nodeName == "get_contact") {
    i_get_contact (children, contacts_box);
  } else if (root.nodeName == "get_history") {
    i_get_history (children, history_box);
  } else if (root.nodeName == "get_chats") {
    i_get_chats (children, chats_box);
  } else if (root.nodeName == "get_no_read") {
    i_get_no_read (children, chats_box);
  } else if (root.nodeName == "send") {
    i_send (children, history_box);
  } else if (root.nodeName == "read") {
    i_read (children, history_box, notice);
  } else if (root.nodeName == "search") {
    i_search (children, search_box);
  } else if (root.nodeName == "add_contact") {
    i_add_contact (children, chats_box);
  } else if (root.nodeName == "handle_add_contact") {
    i_handle_add_contact (children, contacts_box);
  } else if (root.nodeName == "create_group") {
    i_get_contact (children, contacts_box);
  } else {
    console.log("invalid nodeName:" + root.nodeName);
  }
}
function send_message() {
  var inputElement = document.getElementById("message-input");
  var message = inputElement.value;
  if (socket.readyState == WebSocket.OPEN) {
    if (message !== "") {
      var root = document.createElement('send');
      var child = document.createElement('child');
      root.appendChild(child);
      child.setAttribute('peer_id', storage.peer_id);
      child.setAttribute('msg', message);
      console.log("----:" + root.outerHTML);
      socket.send(root.outerHTML);
      inputElement.value = "";
    }
  } else {
  }
}
function search() {
  var root = document.createElement('search');
  var child = document.createElement('child');
  var index = document.getElementById("search").value;
  root.appendChild(child);
  child.setAttribute('index', index);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
function create_group() {
  var root = document.createElement('create_group');
  var child = document.createElement('child');
  var index = document.getElementById("create_group_name").value;
  root.appendChild(child);
  child.setAttribute('index', index);
  console.log("----:" + root.outerHTML);
  socket.send(root.outerHTML);
}
var c, m;
c = document.getElementById("show-contacts");
m = document.getElementById('show-message');
if (!storage.L1box)
  storage.L1box = "show-contacts";
if (storage.L1box == "show-contacts") {
  c.style.display = "grid";
  m.style.display = "none";
  if (!storage.main_L2box)
    storage.main_L2box = "chats-box";
  if (storage.main_L2box) {
    only_show_div ("center-box", storage.main_L2box);
  }
} else if (storage.L1box == "show-message") {
  m.style.display = "grid";
  document.getElementById('history-box').style.display = "grid";
  c.style.display = "none";
}
